<template>
  <div class="w-full mt-[20px] p-[20px] bg-[#F7F9FC] rounded-[8px]" v-if="visible">
    <a-form ref="formRef" :model="internalFilterData" @submit.prevent="onSubmit">
      <a-row>
        <slot :form-data="internalFilterData" name="row-1"></slot>
      </a-row>
      <a-row>
        <slot :form-data="internalFilterData" name="row-2"></slot>
        <FilterFormItem :span="8">
          <a-form-item>
            <a-link @click="onReset">重置</a-link>
          </a-form-item>
        </FilterFormItem>
      </a-row>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits } from 'vue';
import FilterFormItem from './FilterFormItem.vue';

/**
 * Vue component for a filter form.
 *
 * @component FilterForm
 * @props {Boolean} visible - Indicates whether the filter form is visible or not. (required)
 * @props {Object} initialFilterData - The initial filter data for the form. (required)
 */
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  initialFilterData: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['reset', 'submit']);

const formRef = ref();

const internalFilterData = reactive({ ...props.initialFilterData });

const onReset = () => {
  Object.keys(internalFilterData).forEach((key) => {
    internalFilterData[key] = Array.isArray(props.initialFilterData[key]) ? [] : '';
  });
  formRef.value.resetFields();
  emit('reset');
};

const onSubmit = () => {
  console.log('formRef:', formRef.value);
};
</script>

<style scoped>
/* Your styles */
</style>
